<template>
	<div>
		<slot name="vux-search" />
		<vxe-table ref="vxeTableRef" align="center" :auto-resize="true" :border="border" :row-config="{ keyField: rowId, isCurrent: isCurrent, isHover: isHover }" :checkbox-config="checkboxConfig" :seq-config="seqConfig" :tree-config="treeConfig" :data="tableData" empty-text="暂无数据" :loading="loading" :max-height="maxHeight" :min-height="maxHeight" :scroll-y="{ gt: 20 }" show-overflow :sort-config="sortConfig" :sync-resize="true" @current-change="handleCurrentChange" @checkbox-all="handleSelectionChange" @checkbox-change="handleSelectionChange" @radio-change="handleRadioChange" @sort-change="handleSortChange">
			<slot name="vux-column" />
			<template #empty>
				<div style="padding: 100px 0px">
					<img src="../../assets/images/empty.png" style="width: 180px" />
					<p>暂无数据</p>
				</div>
			</template>
		</vxe-table>
	</div>
</template>
<script setup>
/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 09:51:37
 */
defineProps({
	loading: {
		//表格加载
		type: Boolean,
		default: false,
	},
	tableData: {
		//表格数据源
		type: Array,
		required: true,
	},
	rowId: {
		type: String,
		default: 'id',
	},
	border: {
		//表格是否带border
		type: String || Boolean,
		default: 'default',
	},
	maxHeight: {
		type: Number,
		default: 568,
	},
	checkboxConfig: {
		type: Object,
		default: function () {
			return {}
		},
	},
	// 当鼠标点击行时，是否要高亮当前行
	isCurrent: {
		type: Boolean,
		default: false,
	},
	// 当鼠标移到行时，是否要高亮当前行
	isHover: {
		type: Boolean,
		default: true,
	},
	seqConfig: {
		type: Object,
		default: () => {},
	},
	treeConfig: {
		type: Object,
		default: () => {},
	},
	sortConfig: {
		type: Object,
		default: () => {},
	},
})

const emit = defineEmits(['on-selection-change', 'on-checkbox-change', 'radio-change', 'on-sort-change', 'on-search-status', 'handleSearch', 'on-current-change'])
const vxeTableRef = ref(null)
/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-24 09:51:55
 */
// 触发选择框 获取的回调
const handleSelectionChange = data => {
	emit('on-selection-change', data.records)
	emit('on-checkbox-change', data)
}
// 触发排序 获取的回调
const handleSortChange = ({ order, property }) => {
	emit('on-sort-change', property, order)
}
const handleCurrentChange = ({ row }) => {
	emit('on-current-change', row)
}
const handleRadioChange = ({ row }) => {
	emit('radio-change', row)
}

defineExpose({
	vxeTableRef,
})
</script>
